const { resolve } = require('path');
//导入插件
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
//暴露对象
module.exports = {
    //入口
    entry: './src/js/app.js',
    //出口  属性值必须设置为『对象』
    output: {
        path: resolve(__dirname, '../build'),  //这个路径必须为『绝对路径』
        filename: 'js/app.js',
        clean: true,
        publicPath: '/' // 打包时应该将这个设置 加上
    },
    //模式
    mode: 'production',
    //设置 loader
    module: {
        rules: [
            //css 处理
            {
                test: /\.css$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',    // 可以将 CSS 资源转化为 CommonJS 模块
                    'postcss-loader',
                ]
            },
            // less 处理
            {
                test: /\.less$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'less-loader'  //可以将 less 资源转化为 css 资源
                ]
            },
            // babel 语法转换
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage',  // 按需引入(需要使用polyfill)
                                    corejs: { version: 3 }
                                }
                            ]
                        ]
                    }
                }
            },
            {
                test: /\.(jpg|png|gif)$/,
                type: "asset",  //asset  资产    放置静态资源  html,css,js,图片
                //解析器
                parser: {
                    //转base64的条件
                    dataUrlCondition: {
                        maxSize: 8 * 1024, // 8kb
                    }
                },
                //生成文件
                generator: {
                    //打包保存的文件名称
                    filename: 'images/[hash:6][ext]', // ext  extension 扩展名
                },
            },
            // 配置 html 的 loader
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
            {
                test: /\.(eot|svg|woff|woff2|ttf)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[hash:8][ext]',
                },
            }
        ]
    },
    //2. 配置插件
    plugins: [
        new ESLintPlugin(),
        //打包 HTML 
        new HtmlWebpackPlugin({
            template: "./src/index.html",// 指定html模板文件。
            inject: "body",// 将打包生成的JS文件放置在body尾部
            hash: true,// 在引入JS时增加hash后缀字符串,去除缓存。  
            minify: {
                // removeAttributeQuotes: true,// 移除属性中的双引号
                removeComments: true,// 移除注释
                collapseWhitespace: true,// 去除空格与换行
            }
        }),
        //保存 CSS
        new MiniCssExtractPlugin({
            filename: "css/[hash:8].css",
        }),
    ],

    optimization: {
        minimizer: [new CssMinimizerPlugin()],
    },

}